<template>
	<view class="bg">
		<!-- #ifndef H5 -->
		<view class="" style="height: 40px;"></view>
		<!-- #endif -->

		<view class="top">
			<view class="left n-flex-row">
				<!-- <image src="https://img.50api.cn/vx.tongbayun.v3/drawing2.png" mode=""
					@click="daojushow = true;getCard();bf_anjianyin()"></image> -->
				<!-- <image src="../../static/image/wy.webp" mode=""></image> -->
				<image src="https://img.50api.cn/vx.tongbayun.v3/drawing3.png" mode=""
					@click="couponshow = !couponshow;lingquan();bf_anjianyin()"></image>
			</view>
			<view class="right">
				<image src="https://img.50api.cn/vx.tongbayun.v3/drawing4.png" mode=""
					@click="$.to('/pages/my/agreement?type=play_agreement')">
				</image>

				<!-- #ifndef MP-WEIXIN -->
				<!-- <image src="https://img.50api.cn/vx.tongbayun.v3/drawing6.png" @click="lxkefu();bf_anjianyin();" mode="">
				</image> -->
				<image src="../../static/image/kefu.png" @click="lxkefu();bf_anjianyin();" mode="">
				</image>
				<!-- #endif -->

				<!-- #ifdef MP-WEIXIN -->
				<button class="kefu" open-type="contact"></button>
				<!-- #endif -->

				<image :class="muteBgMusic ? 'music stop' : 'music'"
					:src="muteBgMusic?'https://img.50api.cn/vx.tongbayun.v3/drawing136eef561718eee2a9.png':'https://img.50api.cn/vx.tongbayun.v3/drawing6.png'"
					mode="" @click="playMusic();"></image>
			</view>
		</view>

		<view v-if="tong" class="tong" :style="{'background':'url('+tong.bg+')'}">
			<view class="text">
				<u-notice-bar :volume-icon="false" color="#fff" type="none" mode="horizontal" :list="tong.text">
				</u-notice-bar>
			</view>
			<image :src="tong.goods_image" mode="widthFix"></image>
		</view>

		<!-- <audio src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3" :loop="true"></audio> -->

		<view class="lunbo">
			<view class="goods">
				<swiper circular style="height: 600rpx;" :current="swiperCurrent" @change="changeIdx">
					<swiper-item class="lunboitem" v-for="(item,idx) in boxData" :key="idx">
						<image @click="lookbox(item.id);bf_anjianyin();" :src="item.image" mode="widthFix"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="qipao">
				<!-- #ifndef MP-WEIXIN -->
				<prize-flying ref="qipao" v-if="boxData[this.swiperCurrent]" :key="`flying-${flyingKey}`"
					:box-id="boxData[this.swiperCurrent].id"></prize-flying>
				<!-- #endif -->

				<!-- #ifdef MP-WEIXIN -->
				<view class="prize-flying">
					<template v-for="(item, index) in flyLeftList">
						<view :key="index" :class="['fly-prize', 'fly-left']"
							:style="{  animationDuration: flySpeed + 's'}">
							<image :src="item.goods_image" mode=""></image>
						</view>
						<!-- <view :key="index" :class="['fly-prize', 'fly-left']" :style="flyStyle(flyLeft)"></view> -->
					</template>
					<template v-for="(item, index) in flyCenterList">
						<view :key="index" :class="['fly-prize', 'fly-center']"
							:style="{  animationDuration: flySpeed + 's'}">
							<image :src="item.goods_image" mode=""></image>
						</view>
					</template>
					<template v-for="(item, index) in flyRightList">
						<view :key="index" :class="['fly-prize', 'fly-right']"
							:style="{ animationDuration: flySpeed + 's'}">
							<image :src="item.goods_image" mode=""></image>
						</view>
					</template>
				</view>
				<!-- #endif -->


			</view>
			<view class="arrow n-flex-row n-justify-between">
				<image @click="prev();bf_anjianyin();" src="../../static/image/arrow-left.png" mode=""></image>
				<image @click="next();bf_anjianyin();" src="../../static/image/arrow-right.png" mode=""></image>
			</view>
			<image src="https://img.50api.cn/vx.tongbayun.v3/drawing16.png" mode="widthFix" class="shou"></image>
			<view class="dizuobox">
				<image class="dizuo" src="https://img.50api.cn/vx.tongbayun.v3/drawing9.gif" mode="widthFix"></image>
				<text class="price">￥<text class="num">{{boxPrice}}</text>/个</text>
			</view>
			<view class="maxBox">
				<view class="maxyou" v-if="maxYou">
					{{maxYou}}
				</view>
			</view>
		</view>

		<view class="card">
			<swiper circular active-class="active" style="height: 210rpx;" previous-margin="270rpx" next-margin="270rpx"
				:current="swiperCurrent" @change="changeIdx">
				<swiper-item @click="selectCard(idx);bf_anjianyin();" class="cardItem"
					:class="swiperCurrent == idx?'active':''" v-for="(item,idx) in boxData" :key="idx">
					<!-- <image src="../../static/image/float.jpg" mode="widthFix"></image> -->
					<view class="car">
						<image :src="item.footer_image" mode=""></image>
						<view class="boxname">{{item.title}}</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="qbtn n-flex-row n-justify-between">
			<view class="left">
				<image @click="ouhuangshow = true;bf_anjianyin();" src="https://img.50api.cn/vx.tongbayun.v3/drawing10.png"
					mode="heightFix"></image>
			</view>
			<view class="kaixiang" @click="choujiang();bf_anjianyin()">
				<image src="https://img.50api.cn/vx.tongbayun.v3/drawing11.gif" mode="widthFix"></image>
				<view class="biankuang">
					<text></text>
					<text></text>
					<text></text>
					<text></text>
				</view>
			</view>
		</view>
		<view class="tip">
			谢绝未成年人使用或在监护人的监督指导下体验
		</view>
		<view class="tip">
			{{box_prompt}}
		</view>
		<!-- 免费试玩 -->
		<!-- <image src="https://img.50api.cn/vx.tongbayun.v3/drawing7.png" class="free" mode=""
			@click="luckshow = true;isShiwan = true;bf_anjianyin();">
		</image> -->
		<!-- 新手教程 -->
		<image src="https://img.50api.cn/vx.tongbayun.v3/drawing8.png" class="xinshou" mode="widthFix"
			@click="videoShow = true;bf_anjianyin()"></image>

		<!-- 优惠券弹窗 -->
		<u-popup v-model="couponshow" mode="center" :custom-style="{backgroundColor: 'rgba(0, 0, 0, 0)'}">
			<view class="newPeopleBox">
				<view class="newmainBox">
					<scroll-view scroll-y class="youhuilist">
						<view class="youhuibox" v-for="(item,idx) in couponList" :key="idx">
							<view class="left">
								<view>
									<view class="name">{{item.title}}</view>
									<view class="price1" v-if="item.type == 1">
										满{{item.tj_number}}可用
									</view>
									<view class="price1" v-if="item.type == 0">
										<text class="pri">￥{{item.number}}</text>无门槛
									</view>

								</view>
							</view>
							<view class="right">
								<view>
									<view class="price">￥<text>{{item.number}}</text></view>
									<view class="ling" :class="item.is_lingqu == 0?'active':'yiling'"
										@click="receive(item.id,item.is_lingqu,idx);bf_anjianyin()">
										{{item.is_lingqu == 0?'领取':'已领取'}}
									</view>

								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="btm">
					<image class="btmBg" src="http://mhimg.69box.cn/kaixiang/rv.webp" mode="widthFix"></image>
					<view class="btn1">
						<image @click="receiveall();bf_anjianyin()" src="http://mhimg.69box.cn/kaixiang/sd.png"
							mode="widthFix"></image>
					</view>
				</view>

				<view class="off">
					<image @click="couponshow = !couponshow;bf_anjianyin();"
						src="http://mhimg.69box.cn/kaixiang/down.png" mode=""></image>
				</view>
			</view>

		</u-popup>

		<!-- 道具卡 -->
		<u-popup v-model="daojushow" mode="center">
			<view class="box11">
				<view class="daojubox">
					<view class="top">
						<image :src="isCard?'../../static/image/qp.png':'../../static/image/qn.png'" mode="widthFix">
						</image>
						<!-- <view class="rulebox" v-if="isCard" @click="isCard = false;bf_anjianyin();"> -->
						<view class="rulebox" v-if="isCard" @click="go_prop_card_rule">
							<view class="wen">
								?
							</view>
							使用规则
						</view>
					</view>
					<view v-if="isCard">
						<scroll-view scroll-y style="height: 755rpx;width: 100%;margin-top: 30rpx;">
							<view class="cardList">
								<view class="list" v-for="(item,idx) in cardList" :key="idx">
									<view class="goods n-flex-row">
										<view class="picbox">
											<image :src="item.card_data.image" mode=""></image>
										</view>
										<view class="textbox">
											<view class="tit">
												{{item.card_data.title}}
											</view>
											<view class="two">{{item.card_data.introduce}}</view>
											<view class="qi n-flex-row n-justify-between">
												<view>领取时间:{{$u.timeFormat(item.create_time, 'yyyy-mm-dd hh:MM:ss')}}
												</view>
												<!-- <u-icon color="#999" label-color="#999" label-size="24"
													label-pos="left" name="arrow-down" label="适用盲盒">
												</u-icon> -->
											</view>
										</view>
									</view>
									<view class="tip1">
										{{item.introduce}}
									</view>
								</view>
							</view>
							<!-- <u-empty text="暂无道具卡" mode="favor" color="#766ed0" icon-color="#766ed0" :show="cardShow"> -->
							</u-empty>
						</scroll-view>
					</view>

					<!-- <view v-else class="explain">
						<view class="tit">♦<text>重抽卡</text>♦</view>
						<scroll-view scroll-y class="text" style="height: 560rpx;">
							内容
						</scroll-view>
						<view class="btm">
							<view class="btn2" @click="isCard = true;bf_anjianyin();">
								我知道了
							</view>
						</view>
					</view> -->
				</view>
				<view class="off">
					<image @click="daojushow = false;bf_anjianyin();" src="http://mhimg.69box.cn/kaixiang/down.png"
						mode=""></image>
				</view>
			</view>
		</u-popup>

		<!-- 视频 -->
		<u-popup v-model="videoShow" mode="center">
			<view class="vbox">
				<video id="myVideo" class="v" :src="videoSrc" :show-mute-btn="true"></video>
				<view class="btm">
					<button @click="videoShow = false;bf_anjianyin();">我知道了</button>
				</view>
			</view>
		</u-popup>

		<!-- 订单 -->
		<u-popup v-model="orderShow" mode="bottom" :closeable="!selectCoupon">
			<view class="orderbox" v-if="!selectCoupon">
				<view class="tit">确认订单</view>
				<view class="con">
					<view class="box1">
						<view class="goods n-flex-row">
							<image v-if="boxData.length != 0" :src="boxData[swiperCurrent].image" mode="">
							</image>
							<view class="info">
								<view class="t">{{boxName}}</view>
								<view class="two">
									<view class="price">￥{{boxPrice}}</view>
									<view class="num">x{{num}}</view>
								</view>
							</view>
						</view>
						<view v-if="usedCoupon.length != 0" @click="goSelect();bf_anjianyin();"
							class="rowitem n-flex-row n-justify-between" style="margin-top: 10rpx;">
							<view class="l">
								<image src="../../static/image/quanlogo.png" mode=""></image>
								优惠券
							</view>
							<u-icon label-pos="left" :label-color="youhuiNum == '0'?'#999':'#d81e06'" color="#999"
								name="arrow-right" :label="youhuiNum == '0'?'未选择优惠券':'-￥'+youhuiNum">
							</u-icon>
						</view>
						<!-- 星石抵扣 -->
						<view class="rowitem n-flex-row n-justify-between" v-if="paymode != 'integral'">
							<view class="l">
								<image src="../../static/image/y2.png" mode=""></image>
								星石
							</view>
							<view class="" style="color: #999;">
								{{diKou == 0? '无可抵扣数量' : '使用'+(diKou*boxData[swiperCurrent].integral2_dikou_rmb).toFixed(3)+'星石抵扣￥'+diKou}}</view>
						</view>
						<view class="rowitem n-flex-row n-justify-between" v-else>
							<view class="l">
								<image src="../../static/image/xr.png" mode=""></image>
								幸运币
							</view>
							<view class="" style="color: #999;">
								{{diKou == 0? '无可抵扣数量' : '使用'+(diKou*boxData[swiperCurrent].integral2_dikou_rmb).toFixed(3)+'幸运币抵扣￥'+diKou}}</view>
						</view>
						<view class="total" v-if="offer_remarks!=''">
							优惠说明：<text>{{offer_remarks}}</text>
						</view>
					</view>

					<view class="box1" style="margin-top: 20rpx;">
						<u-radio-group style="display: block;" width="34rpx" v-model="paymode" active-color="#70DDE0">

							<view class="rowitem payrow" @click="selectPay('wechat');bf_anjianyin();">
								<view class="l">
									<image src="../../static/image/weixinf.png" mode=""></image>
									微信
								</view>
								<u-radio name="wechat"></u-radio>
							</view>

							<!-- #ifdef APP-PLUS || H5 -->
							<!-- <view class="rowitem payrow" @click="selectPay('alipay');bf_anjianyin();">
								<view class="l">
									<image src="../../static/image/zhifubao.png" mode=""></image>
									支付宝
								</view>
								<u-radio name="alipay"></u-radio>
							</view> -->
							<!-- #endif -->
							<view class="rowitem payrow" @click="selectPay('integral');;bf_anjianyin();">
								<view class="l">
									<image src="../../static/image/xr.png" mode=""></image>
									幸运币(余额：{{userInfo.integral}})
								</view>
								<u-radio name="integral"></u-radio>
							</view>
						</u-radio-group>
					</view>
				</view>
				<view class="obtm" v-if="orderShow">
					<button @click="pay();bf_anjianyin();" v-if="paymode != 'integral'">立即支付<text>￥{{pay_price}}</text></button>
					<button @click="pay();bf_anjianyin();" v-else>立即支付
					<image src="../../static/image/xr.png" mode="" class="obtmimg"></image>
					<text>{{pay_price}}</text>
					</button>
				</view>
				<view class="xieyi">
					<u-checkbox v-model="xieyi" shape="circle" active-color="#70DDE0" label-size="22">
						我已满18岁，已阅读并同意<text
							@click.stop="$.to('/pages/my/agreement?type=payment_agreement')">《支付服务协议》</text>
					</u-checkbox>
				</view>
			</view>

			<view class="syouhui" v-else>
				<view class="youtit">
					<view class="back" @click="selectCoupon = false;bf_anjianyin();">
						<u-icon size="40" name="arrow-left"></u-icon>
					</view>
					<view class="youhuit">
						优惠详情
					</view>
				</view>
				<view class="youhuicon">
					<scroll-view scroll-y class="shitu">
						<radio-group>
							<view class="couList" v-for="(item,idx) in usedCoupon" :key="idx"
								@click="selectCoupon1(item);bf_anjianyin();">
								<view class="l">
									<view class="aa">
										￥<text class="pri">{{item.number}}</text>
										<view class="tiao" v-if="item.coupon_data.type == 0">无门槛</view>
										<view class="tiao" v-if="item.coupon_data.type == 1">
											满{{item.tj_number}}减{{item.number}}
										</view>
									</view>
								</view>
								<view class="r">
									<view class="ll">
										<view class="t">{{item.coupon_data.title}}</view>
										<!-- <view class="use">可用</view> -->
										<view class="qi" style="margin-top: 20rpx;">有效期至
											{{$u.timeFormat(item.coupon_data.end_time, 'yyyy-mm-dd hh:MM:ss')}}
										</view>
									</view>
									<view class="rr">
										<radio :value="item.id+''" :checked="currentCoupon.id == item.id"
											color="#63D7D6" style="transform:scale(0.8)" />
									</view>
								</view>
							</view>
						</radio-group>
					</scroll-view>
					<view class="btn" @click="confirmCoupon();bf_anjianyin();">
						确认
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup v-model="luckshow" mode="center">
			<view class="luckbox">
				<view class="top n-flex-row">
					<image class="titpic" src="https://img.50api.cn/dingdang/lucktit.png" mode="widthFix"></image>
					<image v-if="boxData.length != 0" class="goodsPic" :src="boxData[swiperCurrent].image"
						mode="widthFix"></image>
				</view>
				<view class="option">
					<view class="row" v-if="boxData.length != 0">
						<view class="chou" v-for="(item,idx) in boxData[swiperCurrent].buy_data1" :key="idx"
							@click="chou(item);bf_anjianyin();">
							<view class="jian" v-if="!isShiwan && item.youhui_num>0">{{item.youhui_title}}</view>
							<view class="b">
								<view class="tit">{{item.title}}</view>
								<view v-if="!isShiwan">
									￥{{item.buy_price.toFixed(3)}} 
									<text class="yuanj">￥{{(boxPrice * item.number).toFixed(3)}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup v-model="ouhuangshow" mode="bottom">
			<view class="ouhuang">
				<view style="text-align: right;padding-right: 20rpx;">
					<u-icon @click="ouhuangshow=false;bf_anjianyin();" name="close-circle-fill" color="#ccc" size="55">
					</u-icon>
				</view>
				<scroll-view scroll-y class="scroll">
					<view class="listbox">
						<view class="list" v-for="(item,idx) in ouList" :key="idx">
							<view class="picbox" @click="advert_on(item);bf_anjianyin();">
								<image :src="item.image" mode="mode"></image>
								<view class="text n-flex-row n-justify-between">
									<view>{{item.name}}</view>
									<u-icon name="arrow-right" label-pos="left" label="立即参与"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<!-- <show-result :key="0" ref="result-popup" :num="boxNum" @accept="toMyBox()" @recycle="recycle"
			:type="type" @close="resultKey++"></show-result> -->
		<kefu :isShow='kfshow' ref="child" @cusEvent="hide"></kefu>
		<u-popup v-model="tanShow" mode="center">
			<view class="tanBox">
				<view class="pic">
					<image @click="advert_on(tanCon);bf_anjianyin();" :src="tanCon.image" mode="widthFix"></image>
				</view>
				<view class="off">
					<image @click="tancancel();bf_anjianyin();" src="http://mhimg.69box.cn/kaixiang/down.png" mode="">
					</image>
				</view>
			</view>
		</u-popup>
		<u-tabbar v-model="current" :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	import kefu from '@/components/kefu.vue'
	import colorGradient from 'uview-ui/libs/function/colorGradient';
	import prizeFlying from "@/components/prize-flying.vue"
	import config from "../../utils/config.js"
	const anjianyin = config.baseUrl + '/static/api/video/anjian.mp3'
	import {
		tabbar
	} from "@/common/tabbar.js"
	const anniumusic = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				current: 2,
				tabbar: tabbar,
				currentCoupon: '', //当选择的优惠券
				Confirmed: '', //已确认的优惠券
				youhuiNum: '0',
				swiperCurrent: 0,
				couponshow: false, //优惠券弹窗
				daojushow: false, //道具卡弹窗
				isCard: true, //我的道具卡与使用规则切换
				videoShow: false, //视频弹窗
				orderShow: false, //订单弹窗
				videoSrc: '',
				muteBgMusic: false, //是否静音
				// #ifdef MP-WEIXIN || H5
				paymode: 'integral',
				// #endif

				// #ifdef APP-PLUS
				paymode: 'integral',
				// #endif
				xieyi: true,
				selectCoupon: false, //选择优惠券
				luckshow: false, //抽奖弹窗
				boxData: [],
				boxPrice: '0.00', //盲盒价格
				ouhuangshow: false, //欧皇弹窗
				ouList: [], //欧皇福利列表
				isShiwan: false, //是否试玩
				num: '', //几抽
				kfshow: false,
				couponList: [], //优惠券列表
				cardList: [], //道具卡
				cardShow: false,
				usedCoupon: [],
				tongList: [], //中奖通知
				tong: '',
				dings: '',
				maxYou: '', //最高优惠
				tanList: [], //弹窗列表
				tanShow: false,
				tanCon: '',
				tanidx: 0,
				pay_price: 0, //支付价格
				buy_fangan: [], //购买方案
				flyingKey: 0,
				xing: '', //星石
				diKou: 0, //抵扣星石数量
				boxName: '', //盲盒名称

				prizeList: [],
				flyLeftList: [],
				flyCenterList: [],
				flyRightList: [],
				indexRecord: 0, //记录奖品下标
				intervalTime: 2, //飞出频率 秒
				interval: null,
				flySpeed: 25, //飞行速度 秒 越小越快
				currentCoupon_id: 0, //优惠券ID
				userInfo: {},
				offer_remarks: '',
				box_prompt:''
			}
		},
		onLoad() {
			this.getManghe()
			this.getPop()
			this.getOuHuang()
			this.getvideo()
			uni.$on('music', (data) => {
				this.muteBgMusic = data
			})
			uni.loadFontFace({
				family: 'myfont',
				source: 'url("https://img.50api.cn/dingdang/YouSheBiaoTiHei.ttf")',
			})
			this.getTong()
			anniumusic.src = anjianyin

			// APP强制绑定手机号
			// #ifdef APP-PLUS
			if (uni.getStorageSync('user').id != '' && uni.getStorageSync('user').mobile.length != 11) {
				uni.redirectTo({
					url: '/pages/my/changePhone'
				})
			}
			// #endif
		},
		computed: {
			prizeLength() {
				return this.prizeList.length
			}
		},
		destroyed() {
			//销毁
			clearInterval(this.interval)
		},
		components: {
			kefu,
			prizeFlying
		},
		// onShow() {
		// 	this.getCard()
		// },
		methods: {
			bf_anjianyin() {
				// return;
				anniumusic.stop();
				anniumusic.play();
			},
			//前往查看道具卡规则
			go_prop_card_rule() {
				uni.navigateTo({
					url: '/pages/my/agreement?type=prop_card_rule'
				})
				bf_anjianyin();
			},
			// 获取星石
			getXing() {
				this.$http({
					url: "api/member/get_user_info",
				}).then(res => {
					if (res.data.code == 1) {
						this.userInfo = res.data.data.member;
						uni.setStorageSync('user', res.data.data.member)
						uni.$emit('updataUser');
						this.xing = res.data.data.member.integral2
						if (this.xing == 0) {
							this.get_box_price();
							return
						}
						var max = (this.boxPrice * this.num * 0.1).toFixed(3)
						if ((this.xing / this.boxData[this.swiperCurrent].integral2_dikou_rmb) > max) {
							this.diKou = max
						} else {
							this.diKou = (this.xing / this.boxData[this.swiperCurrent].integral2_dikou_rmb)
								.toFixed(3)
						}
							this.get_box_price();
					}
				}).catch(err => {});
			},
			//加载奖品列表
			loadPrizeList() {
				console.log("掉用气泡");
				// if (!this.boxId) return
				this.$http({
					url: "api/common/get_blind_box_goods",
					data: {
						blind_box_id: this.boxData[this.swiperCurrent].id
					}
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						this.prizeList = res.data.data.goods_list
						this.flyInterval()
					}
				}).catch(err => {});
			},
			//循环
			flyInterval() {
				this.pushFlyList()
				this.interval = setInterval(() => {
					this.pushFlyList()
				}, this.intervalTime * 1000)
			},
			pushFlyList() {
				let count = 0
				while (count < 3) {
					if (this.indexRecord == this.prizeLength - 1) {
						this.indexRecord = 0
					} else {
						this.indexRecord++
					}
					let prize = this.prizeList[this.indexRecord]
					switch (count) {
						case 0:
							this.flyLeftList.push(prize)
							break
						case 1:
							this.flyCenterList.push(prize)
							break
						case 2:
							this.flyRightList.push(prize)
							break
					}
					count++
				}
			},
			flyStyle(prize) {
				return {
					background: `url(${prize.image})`,
					'-webkit-animation-duration': `${this.flySpeed}s`,
					'animation-duration': `${this.flySpeed}s`,
				}
			},

			tancancel() {
				this.tanShow = false
				this.tanidx += 1
				if (this.tanidx < this.tanList.length) {
					this.tanShow = true
				} else {
					return
				}
				this.tanCon = this.tanList[this.tanidx]
			},
			getTong() {
				setTimeout(() => {
					this.getTong()
				}, 10000)
				clearTimeout(this.dings)
				this.$http({
					url: "api/common/get_blind_box_open_log",
				}).then(res => {
					if (res.data.code == 1) {
						this.tongList = res.data.data
						this.tongz()
					}
				}).catch(err => {});
			},
			tongz() {
				if (this.tongList.length == 0) {
					return
				}
				var arr = this.$u.randomArray(this.tongList)
				arr.forEach(item => {
					item.text = '恭喜 ' + item.username + ' 获得' + item.goods_name
					item.text = [item.text]
					item.bg = 'https://img.50api.cn/dingdang/sstz.png'
					// if (item.tag == 'legend') {
					// 	item.bg = 'https://img.50api.cn/dingdang/cstz.png'
					// } else {
					// 	item.bg = 'https://img.50api.cn/dingdang/sstz.png'
					// }
				})
				this.tong = arr[0]
				this.dings = setTimeout(() => {
					this.tong = ""
				}, 9000)
			},
			lingquan() {
				this.getYouhui()
			},
			// 选择优惠券
			selectCoupon1(val) {
				if(this.currentCoupon==val){
					this.currentCoupon = '';
					this.Confirmed = '';
					this.youhuiNum = 0;
					this.currentCoupon_id = 0;
					this.get_box_price();
					return;
				}
				this.currentCoupon = val
				// alert(val);
			},
			// 确认选择优惠券
			confirmCoupon() {
				// alert(this.currentCoupon.id);
				if (!this.currentCoupon) {
					this.Confirmed = '';
					this.youhuiNum = 0;
					this.currentCoupon_id = 0;
					this.selectCoupon = false;
					this.get_box_price();
					return;
				}
				console.log(this.currentCoupon, "已选择");
				if (this.currentCoupon.type != 0) {
					if ((this.boxPrice * this.num) < this.currentCoupon.coupon_data.tj_number) {
						this.$tip.tip("该优惠券不可用")
						return
					}
				}
				this.Confirmed = this.currentCoupon
				this.youhuiNum = this.Confirmed.coupon_data.number
				this.currentCoupon_id = this.currentCoupon.id;
				this.selectCoupon = false
				this.get_box_price();
			},
			goSelect() {
				this.selectCoupon = true
				this.getNotUsed()
			},
			// 获取未使用优惠券
			getNotUsed() {
				this.$http({
					url: "api/member/get_my_coupon",
				}).then(res => {
					console.log(res, '');
					if (res.data.code == 1) {
						this.usedCoupon = res.data.data
					} else {
						this.show = true
					}
				}).catch(err => {});
			},
			// 获取我的道具卡
			getCard() {
				this.$http({
					url: "api/member/get_my_card"
				}).then(res => {
					if (res.data.code == 1) {
						if (res.data.data.length == 0) {
							this.cardShow = true
						} else {
							this.cardShow = false
						}
						this.cardList = res.data.data
					} else {
						this.cardShow = true
					}
				}).catch(err => {});
			},
			// 领取全部优惠券
			receiveall() {
				let arr = []
				this.couponList.forEach(item => {
					if (item.is_lingqu == 0) {
						arr.push(item.id)
					}
				})
				if (arr.length == 0) {
					this.$tip.tip("暂无可领取优惠券");
					return
				}
				var arrJoinString = arr.join();
				this.$http({
					url: "api/member/receive_coupon",
					data: {
						cid: arrJoinString
					}
				}).then(res => {
					if (res.data.code == 1) {
						this.couponList.forEach(item => {
							item.is_lingqu = 1
						})
						this.getNotUsed()
						this.$tip.tip(res.data.msg)
					} else {
						this.$tip.tip(res.data.msg)
					}
				}).catch(err => {});

			},
			// 领取单个优惠券
			receive(id, is_lingqu, idx) {
				if (is_lingqu == 1) {
					this.$tip.tip("该优惠券已经领取过了");
					return;
				}
				this.$http({
					url: "api/member/receive_coupon",
					data: {
						cid: id
					}
				}).then(res => {
					if (res.data.code == 1) {
						this.couponList[idx].is_lingqu = 1
						this.getNotUsed()
						this.$tip.tip("优惠券领取成功");
					} else {
						this.$tip.tip(res.data.msg)
					}
				}).catch(err => {});


			},
			getYouhui() {
				this.$http({
					url: "api/common/get_coupon",
					data: {
						uid: uni.getStorageSync("user").id
					},
				}).then(res => {
					console.log(res, '优惠券');
					if (res.data.code == 1) {
						this.couponList = res.data.data
					}
				}).catch(err => {});
			},
			// 支付
			pay() {
				if (!this.xieyi) {
					this.$tip.tip("请阅读并同意协议")
					return
				}
				if (this.paymode == "") {
					this.$tip.tip("请选择支付方式")
					return
				}
				let price = this.pay_price;
				this.$http({
					url: "api/pay/go_pay",
					data: {
						boxid: this.boxData[this.swiperCurrent].id,
						num: this.num,
						paymode: this.paymode,
						currentCoupon_id: this.currentCoupon.id,
						price: price,
						xs: (this.diKou * this.boxData[this.swiperCurrent].integral2_dikou_rmb).toFixed(0),
						// #ifdef H5
						client: 0,
						// #endif

						// #ifdef MP-WEIXIN
						client: 1,
						// #endif

						// #ifdef APP-PLUS
						client: 2,
						// #endif

					}
				}).then(res => {
					if (res.data.code == 1) {
						// console.log("res.data: " + JSON.stringify(res.data.data.pay_data));return;
						this.orderShow = false
						// #ifdef H5
						this.fun.go_h5pay(res.data.data);
						// #endif

						// #ifdef MP-WEIXIN
						this.fun.go_mpwxpay(res.data.data).then(payres => {
							this.$tip.tip("支付成功", "success")
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/home/luckbox'
								})
								setTimeout(() => {
									uni.$emit('paydata', {
										ooid: res.data.data.order_no,
										id: this.boxData[this.swiperCurrent].id,
										num: this.num
									})
								}, 600)
							}, 700)
						}).catch(payerr => {
							this.$tip.tip('支付失败')
						});
						// #endif

						// #ifdef APP-PLUS
						if (this.paymode == 'wechat') {
							this.fun.go_appwxpay(res.data.data.pay_data).then(payres => {
								this.$tip.tip("支付成功", "success")
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/home/luckbox'
									})
									setTimeout(() => {
										uni.$emit('paydata', {
											ooid: res.data.data.order_no,
											id: this.boxData[this.swiperCurrent]
												.id,
											num: this.num
										})
									}, 600)
								}, 700)
							}).catch(payerr => {
								this.$tip.tip('支付失败')
							});
						} else {
							this.fun.go_appalipay(res.data.data.pay_data).then(payres => {
								this.$tip.tip("支付成功", "success")
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/home/luckbox'
									})
									setTimeout(() => {
										uni.$emit('paydata', {
											ooid: res.data.data.order_no,
											id: this.boxData[this.swiperCurrent]
												.id,
											num: this.num
										})
									}, 600)
								}, 700)
							}).catch(payerr => {
								this.$tip.tip('支付失败')
							});
						}
						// #endif

					} else if (res.data.code == 8) { //0元免支付的
						this.orderShow = false
						this.$tip.tip("支付成功", "success")
						this.go_luckbox(res.data.data);
					} else {
						console.log("res.data: " + JSON.stringify(res.data));
						return;
						this.$tip.tip(res.data.msg)
					}
				}).catch(err => {});
				return;
			},
			//前往开盒
			go_luckbox(data) {
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/home/luckbox'
					})
					setTimeout(() => {
						uni.$emit('paydata', {
							ooid: data.ooid,
							id: this.boxData[this
								.swiperCurrent].id,
							num: this.num
						})
					}, 600)
				}, 700)
			},
			hide() {
				this.kfshow = false
			},
			// 联系客服
			lxkefu() {

				this.$refs.child.getKf()
				this.kfshow = true
			},
			// 查看盲盒
			lookbox(id) {
				uni.navigateTo({
					url: '/pages/home/kaixiang?id=' + id + '&music=' + this.muteBgMusic
				})
			},
			//广告点击跳转
			advert_on(info) {
				if (info.link_url_type == 1) { //指定盲盒跳转
					uni.navigateTo({
						url: '/pages/home/kaixiang?id=' + info.link_url + '&music=' + this.muteBgMusic
					})
				} else if (info.link_url_type == 2) { //跳转外部网站
					uni.navigateTo({
						url: '/pages/tabBar/h5'
					})
					setTimeout(() => {
						uni.$emit('go_h5', {
							url: info.link_url
						})
					}, 600)
				}
			},
			//获取弹窗
			getPop() {
				this.$http({
					url: "api/common/get_advert",
					data: {
						type: 1
					}
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						let arr = []
						arr = res.data.data
						if (arr.length != 0) {
							this.tanShow = true
							this.tanList = arr
							this.tanCon = arr[0]
						}
					}
				}).catch(err => {});
			},
			// 获取欧皇福利
			getOuHuang() {
				this.$http({
					url: "api/common/get_advert",
					data: {
						type: 2
					}
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						let arr = []
						this.ouList = res.data.data
					}
				}).catch(err => {});
			},
			// 获取视频
			getvideo() {
				this.$http({
					url: "api/common/get_general",
				}).then(res => {
					if (res.data.code == 1) {
						this.videoSrc = res.data.data.novice_tutorial
						this.box_prompt = res.data.data.box_prompt
					}
				}).catch(err => {});
			},
			// 获取盲盒
			getManghe() {
				this.$http({
					url: "api/common/get_blind_box",

				}).then(res => {
					console.log(res, "盲盒");
					if (res.data.code == 1) {
						this.boxData = res.data.data
						var data = res.data.data
						this.boxPrice = this.boxData[0].price
						this.boxName = this.boxData[0].title
						this.maxYou = this.boxData[0].label
						//#ifdef MP-WEIXIN
						this.loadPrizeList()
						//#endif
						// 数据不够5自动添加
						if (this.boxData.length < 5) {
							for (var i = 0; i < 5; i++) {
								if (this.boxData.length >= 5) {
									return
								}
								this.boxData = this.boxData.concat(data)
							}
						}

					}
				}).catch(err => {});
			},

			choujiang() {
				this.youhuiNum = 0;
				this.currentCoupon = '';
				this.luckshow = true
				this.isShiwan = false
				this.getNotUsed()
			},
			chou(fangan) {
				this.buy_fangan = fangan;
				this.num = fangan.number
				if (this.isShiwan == false) {
					this.getXing()
					this.orderShow = true
				} else {
					uni.navigateTo({
						url: '/pages/home/luckbox'
					})
					setTimeout(() => {
						uni.$emit('cdata', {
							id: this.boxData[this.swiperCurrent].id,
							num: fangan.number
						})
					}, 600)

				}
				this.luckshow = false
			},
			playMusic() {
				this.muteBgMusic = !this.muteBgMusic;
			},



			// 选择支付方式
			selectPay(mode) {
				this.paymode = mode
				this.get_box_price()
			},
			//获取支付价格
			get_box_price() {
				this.$http({
					url: "api/pay/get_box_price",
					data: {
						boxid: this.boxData[this.swiperCurrent].id,
						num: this.num,
						paymode: this.paymode,
						currentCoupon_id: this.currentCoupon.id,
					}
				}).then(res => {
					if (res.data.code == 1) {
						this.pay_price = res.data.data.price;
						this.offer_remarks = res.data.data.offer_remarks;
					} else {
						this.$tip.tip('获取价格失败，请关闭重试')
					}
				}).catch(err => {});
			},
			// 页面改变
			changeIdx(idx) {
				this.swiperCurrent = idx.detail.current
				this.boxPrice = this.boxData[this.swiperCurrent].price
				this.boxName = this.boxData[this.swiperCurrent].title
				this.maxYou = this.boxData[this.swiperCurrent].label
				this.flyingKey++
				// this.prizeList = []
				// this.flyLeftList = [],
				// this.flyCenterList = [],
				// this.flyRightList = [],
				// clearInterval(this.interval)
				// this.loadPrizeList()
			},
			prev() {
				this.swiperCurrent--
				if (this.swiperCurrent < 0) {
					this.swiperCurrent = this.boxData.length - 1
				}
			},
			next() {
				this.swiperCurrent++
				if (this.swiperCurrent >= this.boxData.length) {
					this.swiperCurrent = 0
				}
			},
			selectCard(id) {
				this.swiperCurrent = id
			},
			rulechange(index) {
				console.log(index);
			}
		},

		watch: {
			muteBgMusic(newValue, oldValue) {
				if (newValue) {
					// 开启静音
					this.$music.playBgm({
						mute: true
					});
				} else {
					// 关闭 静音
					this.$music.playBgm({
						mute: false
					});
				}
			}
		},


	}
</script>

<style>
	@import url("../../common/css/home.css");
</style>
<style lang="scss">
	.obtmimg{
		display: inline-block;
		width: 30rpx;
		height: 30rpx;
		padding: 0 15rpx;
	}
	.prize-flying {
		z-index: 99;
		width: 200rpx;
		position: absolute;
		bottom: 50%;
		left: 50%;
		transform: translateX(-50%);

		.fly-prize {
			text-align: center;
			position: absolute;
			top: 100%;
			opacity: 0;
			width: 78rpx;
			height: 58rpx;
			background-image: url('https://img.50api.cn/dingdang/paopao.png') !important;
			background-repeat: no-repeat !important;
			background-size: 100% 100% !important;
			border-radius: 50%;
			background: #fff;
			// border: 1px solid #3277ff;
			padding: 14rpx;
			text-align: center;

			image {
				margin-top: 15%;
				width: 70%;
				height: 70%;
			}
		}

		.fly-left {
			left: 0px;
			z-index: 5;
			-webkit-animation: flyleft;
			animation: flyleft;
		}

		.fly-center {
			left: 60rpx;
			z-index: 3;
			-webkit-animation: flycenter;
			animation: flycenter;

		}

		.fly-right {
			right: 0px;
			z-index: 5;
			-webkit-animation: flyright;
			animation: flyright;
		}
	}

	// 动画
	@keyframes flyleft {
		0% {
			// top: 100%;
			-webkit-transform: scale(0) translateX(0);
			transform: scale(0) translateX(0);
			opacity: .6;
		}

		3% {
			// top: 95%;
		}

		5% {
			-webkit-transform: scale(1) translateX(0) translateY(-80%);
			transform: scale(1) translateX(0) translateY(-80%);
			opacity: .8;
		}

		20% {
			opacity: 1;
		}

		30% {
			opacity: .2;
		}

		32% {
			opacity: 0;
			visibility: hidden;
		}

		50% {
			-webkit-transform: scale(1.9) translateX(-40px) translateY(-340%);
			transform: scale(1.9) translateX(-40px) translateY(-340%);
		}

		100% {
			// top: 0%;
			-webkit-transform: translateX(-100px);
			transform: translateX(-100px);
		}
	}

	@keyframes flycenter {
		0% {
			// top: 100%;
			-webkit-transform: scale(0) translateX(0);
			transform: scale(0) translateX(0);
			opacity: .6;
		}

		3% {
			// top: 95%;
		}

		5% {
			-webkit-transform: scale(1) translateX(0) translateY(-80%);
			transform: scale(1) translateX(0) translateY(-80%);
			opacity: .8;
		}

		20% {
			opacity: 1;
		}

		30% {
			opacity: .2;
		}

		32% {
			opacity: 0;
			visibility: hidden;
		}

		34% {
			opacity: 0;
		}

		50% {
			-webkit-transform: scale(1.9) translateX(0) translateY(-340%);
			transform: scale(1.9) translateX(0) translateY(-340%);
		}

		100% {
			// top: 0%;
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}
	}

	@keyframes flyright {
		0% {
			// top: 100%;
			-webkit-transform: scale(0) translateX(0);
			transform: scale(0) translateX(0);
			opacity: .6;
		}


		3% {
			// top: 95%;
		}

		5% {
			-webkit-transform: scale(1) translateX(0) translateY(-80%);
			transform: scale(1) translateX(0) translateY(-80%);
			opacity: .8;
		}

		20% {
			opacity: 1;
		}

		30% {
			opacity: .2;
		}

		32% {
			opacity: 0;
			visibility: hidden;
		}

		34% {
			opacity: 0;
		}

		50% {
			-webkit-transform: scale(1.9) translateX(40px) translateY(-340%);
			transform: scale(1.9) translateX(40px) translateY(-340%);
		}

		100% {
			// top: 0%;
			-webkit-transform: translateX(100px);
			transform: translateX(100px);
		}
	}
</style>
